<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>边框图片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 27px solid #f00;
            /* 添加边框图片
                border-image-source 指定边框图片的路径, 默认只填充到容器的四个角点
                border-image-slice 设置四个方向上的裁切距离，理解为内间距 fill 做内容的内部填充
                border-image-width 边框图片的宽度 如果没有设置这个属性，那么宽度默认就是元素的原始的宽度
                    建议一般将值设置为原始的边框宽度
                border-image-outset 扩展边框
                border-image-repeat 边框图片重复
                    repeat 直接重复平铺
                    round 将内容缩放进行完整的填充
                    stretch 拉伸

                缩写：
                    border-image: source slice / width/outset repeat;
                
                * 注意：边框图片的本质是给边框添加背景图片，并不会影响元素内容的放置
                    元素的内容只会被容器的 border 和 padding 影响
            */
            border-image-source: url("../static/images/css3.png");
            /* border-image-slice: 10; */
            border-image-width: 27px;
            border-image-outset: 0;
            border-image-repeat: round;
        }
    </style>
</head>
<body>
    <div>边框图片的宽度 如果没有设置这个属性，那么宽度默认就是元素的原始的宽度</div>
</body>
</html>